<template>
  <div class="box">
    <div class="back" @click="onClickBack">后退</div>
    <div class="box1">
      <p class="title">请登录</p>
      <input type="text" placeholder="请输入用户名" v-model="username" />
      <br />
      <input type="password" placeholder="请输入密码" v-model="userpass" />
      <br />
      <p class="forget">忘记密码?</p>
      <input type="button" value="登录" class="start" />
    </div>
  </div>
</template>
<script>
// import axios from "../../untils/request";
export default {
  data() {
    return {
      username: "",
      userpass: ""
    };
  },
  methods: {
    onClickBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.box1 {
  width: 90%;
  height: 3.8rem;
  /* background-color: blueviolet; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "KaiTi";
  padding-top: 0.6rem;
}
.back {
  height: 0.4rem;
  line-height: 0.4rem;
  text-indent: 5%;
  border-bottom: 0.01rem solid #f1f1f1;
  font-family: "KaiTi";
}
.title {
  font-size: 0.26rem;
  text-align: center;
  margin-bottom: 0.6rem;
}
input {
  width: 3.3rem;
  height: 0.42rem;
  background-color: #f1f1f1;
  font-size: 0.18rem;
  border: none;
  outline: none;
  border-bottom: 0.01rem solid gray;
  margin-bottom: 0.15rem;
  font-family: "KaiTi";
}
.start {
  width: 2rem;
  background-color: #f1f1f1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.forget {
  width: 100%;
  height: 0.2rem;
  line-height: 0.2rem;
  margin-bottom: 0.15rem;
  text-align: right;
}
</style>